<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简答题</title>
</head>
<body>
    <div>
        <ol>
            <li><h3>描述一下相对定位与绝对定位的区别</h3>一、主体不同</li>

        1、相对定位：是设置为相对定位的元素框会偏移某个距离。
                
    </br>2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。</br>
                
    </br>二、特点不同
                
</br>1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
                
</br>2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。</br>

            </br>三、表现方式不同

        </br>1、相对定位：对一个元素进行相对定位，它将出现在它所在的位置上。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

    </br>2、绝对定位：文本流中的内容会顶替绝对定位元素的位置，而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是被绝对定位后的坐标原点。
            
                    </li>
            <li><h3>描述一下你了解到的元素等级有哪些，具体介绍每一个元素等级的特点</h3>块级元素</br>
    容器级标签,p div h1等
        </br>可以设置宽高
    </br>独占一行
</br>宽度百分百，高度内容自适应</br>
</br>行内元素
</br>文本级标签，span a b等
</br>不能加载宽高
</br>行内跟行内可以并排显示
</br>宽度高度只能被内容撑开</br>
</br>行内块元素
</br> img input等
</br>可以设置宽高
</br>可以并排显示
</br>不设置宽高，会根据内容撑开
</br>具有标准流的微观性质
            </li>
            <li><h3>描述一下你所知道的清除浮动的方式（起码三种）</h3>给标准流的父元素设置固定高度</br>
                给标准流的父元素设置clear属性,left、right、both</br>
                外墙法：两个盒子之间插入clear空盒子解决margin无效</br>
                内墙法：盒子内部添加clear空盒子解决高度自适应</br>
                伪类：div class="clearfix"</br>
                    clearfix：after</br>
                    {</br>
                        clear: both;</br>
                        display: block;</br>
                        visibility: hidden;</br>
                        height : 0;</br>
                    }</br>
                溢出隐藏：父元素不设置高度情况下，overflow：hidden；
                </li>
                <li><h3>描述一下你所知道的视频标签属性的属性名、属性值、以及作用（起码四种）</h3>autoplay autoplay 视频自动播放</br>
                    controls controls 显示播放控件</br>
                    loop loop 视频循环播放</br>
                    preload 视频预加载</br>
                    url 文件地址 视频地址</br>
                    width 1000px 播放器宽度</br>
                    height 1000px 播放器高度</li>
            <li><h3>CSS3新增了伪元素选择器中双冒号与单冒号有什么区别，并阐述一下伪元素的注意事项</h3>在CSS3的规范里，伪元素的语法被修改成使用双冒号</br>
                伪元素只能给双标签添加，不能给单标签添加</br>
                伪元素的冒号前不能有空格</br>
                伪元素里边必选添加属性content:"";</br>
                before和after创建的是行内元素</li>
            <li><h3>标准盒模型与怪异盒模型的区别</h3>content-box 标准盒模型，内容区域只包括内容的宽高（不包括padding），内容区域大小固定，总体大小为width+padding+border</br>
                border-box:固定盒子大小，大小为width和height，包含border、padding，内容区域自适应宽高会自动内减</li>
        </ul>
    </div>
</body>
</html>